import { GridContainerStyleProps } from '@aws-amplify/ui-react'; import * as React from 'react'; import { demoState } from '@/utils/demoState'; import { GridContainerPropControlsProps } from './GridContainerPropControls'; interface UseGridContainerProps { (initialValues: GridContainerStyleProps): GridContainerPropControlsProps; } export const useGridContainerProps: UseGridContainerProps = (initialValues) => { const [autoColumns, setAutoColumns] = React.useState( initialValues.autoColumns ); const [autoFlow, setAutoFlow] = React.useState(initialValues.autoFlow); const [autoRows, setAutoRows] = React.useState(initialValues.autoRows); const [columnGap, setColumnGap] = React.useState(initialValues.columnGap); const [gap, setGap] = React.useState(initialValues.gap); const [rowGap, setRowGap] = React.useState(initialValues.rowGap); const [templateAreas, setTemplateAreas] = React.useState( initialValues.templateAreas ); const [templateColumns, setTemplateColumns] = React.useState( initialValues.templateColumns ); const [templateRows, setTemplateRows] = React.useState( initialValues.templateRows ); const [alignItems, setAlignItems] = React.useState(initialValues.alignItems); const [alignContent, setAlignContent] = React.useState( initialValues.alignContent ); const [justifyContent, setJustifyContent] = React.useState( initialValues.justifyContent ); React.useEffect(() => { demoState.set('GridContainer', { autoColumns, autoFlow, autoRows, columnGap, gap, rowGap, templateAreas, templateColumns, templateRows, alignItems, alignContent, justifyContent, }); }, [ autoColumns, autoFlow, autoRows, columnGap, gap, rowGap, templateAreas, templateColumns, templateRows, alignItems, alignContent, justifyContent, ]); return { autoColumns, setAutoColumns, autoFlow, setAutoFlow, autoRows, setAutoRows, columnGap, setColumnGap, gap, setGap, rowGap, setRowGap, templateAreas, setTemplateAreas, templateColumns, setTemplateColumns, templateRows, setTemplateRows, alignItems, setAlignItems, alignContent, setAlignContent, justifyContent, setJustifyContent, }; };